<template>
  <div class="nav">
    <n-card embedded style="left: 0px; top: 0px; position: fixed">
      <n-layout>
        <n-layout has-sider>

          <n-layout-sider content-style="padding: 12px;">
            <div v-on:click="toHome">
              <n-gradient-text :size="40" type="info">

                Compkey

              </n-gradient-text>
            </div>
          </n-layout-sider>
          <n-layout-content content-style="padding: 24px;">
            <n-input round placeholder="请输入关键字" size="large" clearable autosize @keyup.enter="submit"
              @input="handleInput" style="min-width: 50%">
              <template #prefix>
                <n-icon :component="SearchOutline" />
              </template>
            </n-input>
          </n-layout-content>
        </n-layout>
      </n-layout>
    </n-card>
  </div>

  <div class="table">
    <n-data-table :columns="columns" :data="data.tableDate" size="large" :bordered="false" :pagination="pagination "
      striped :row-props="rowProps" />
  </div>

</template>

<script lang="ts" setup>
import { h, reactive, ref } from "vue";
import { SearchOutline } from "@vicons/ionicons5";
import { NRate, useLoadingBar, useMessage } from "naive-ui";
import axios from "axios";
import { BackURL, BaseURL } from "@/api";
import { useRoute } from "vue-router";
import type { RowData } from "naive-ui/es/data-table/src/interface";
import router from "@/router";

const message = useMessage();
const route = useRoute();
const loadingBar = useLoadingBar();

type compkey = {
  key: number;
  word: string;
  rate: number;
};

const createColumns = ({
  scoring,
}: {
  scoring: (rowDate: RowData, score: number) => void;
}) => {
  return [
      {
        title: "编号",
        key: "key",
      },
      {
        title: "竞争性关键字",
        key: "word",
      },
      {
        title: "竞争度",
        key: "rate",
        sorter: true,
      },
      {
        title: "评分",
        key: "actions",
        render(row: any) {
          return h(NRate, {
            size: "large",
            allowHalf: true,
            onUpdateValue: (value: number) => {
              scoring(row, value);
              // message.info('打分成功，分数为: ' + value)
            },
          });
        },
      },
    ]

};

const rowProps = (row: RowData) => {
  return {
    onClick: () => {
      console.log('双击内容为： ' + row.word)
      doubleClick(row.word)
    }
  }
}

const data = reactive({
  tableDate: [{}],
});

const columns = createColumns({
  scoring(rowData, score) {
    // message.info('关键词为： ' + rowData.word + "种子关键词为： " + input)
    axios
      .post(BaseURL + "/scoring", {
        keyword: input,
        compkey: rowData.word,
        score: score / 5.0,
      })
      .then((response) => {
        message.success("评分成功");
      });
  },
});

const pagination = { pageSize: 10 };

let input = route.query.keyword;
console.log("接收到的参数为：" + route.query.keyword);
axios.post(BaseURL + "/search", {
  keyword: input,
}).then((response) => {
  data.tableDate = response.data.data;
});

const handleInput = (str: string) => {
  input = str;
};

const submit = () => {
  if (input != null && input.length != 0) {
    console.log("搜索内容为： " + input);
    loadingBar.start();
    // 请求后端,此处待补充
    axios
      .post(BaseURL + "/search", {
        keyword: input,
      })
      .then((response) => {
        loadingBar.finish();
        data.tableDate = response.data.data;
      })
      .catch((error) => {
        loadingBar.error();
      });
  } else {
    console.log("搜索框内容为空");
  }
};

const toHome = () => {
  console.log('执行跳转')
  router.push('search')
}


</script>

<style scoped>
.table {
  top: 140px;
  left: 10px;
  position: fixed;
  width: 90%;
}
</style>
